<!-- 最新资讯-更多 -->
<template>
	<div ref="newsRef">
	<div  class="more-news _shadow" v-if="total>0" >
		<ul >
			<li @click="gotoDetail(item.articleId)" v-for="(item, index) in newsList" :key="index">
				<div class="_flex-center">
					<div class="dot"></div>
					<span>{{ item.title }}</span>
				</div>
				<span>{{ item.publishTimeText ? item.publishTimeText : item.createTime }}</span>
			</li>
		</ul>
		<!-- 分页操作栏 -->
		<div class="more-news-pagination">
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="pageSize"
				:total="total"
				@current-change="handlePageSizeChange"
			/>
		</div>
	</div>
		<div class="more-news _shadow" v-else>
			<el-empty  description="没有数据" />
		</div>
	</div>
</template>
<script lang="ts" setup name="moreNews">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
//------------------接收传入参数(组件)-------------------

//------------------内部变量定义-------------------------
const router = useRouter();
const newsRef = ref();
// 资讯列表
const newsList = ref<any[]>([]);
const total = ref<number>(1);
// 单页显示条数
const pageSize = ref<number>(10);
const queryData = ref<any>({});
//------------------定义调用方法-------------------------
/**
 * @description 查询资讯列表
 */
const getNewsList = (pageNum: string | number = 0) => {
	let params=Object.assign({pageNum: pageNum,pageSize: pageSize.value}, queryData.value);
	$api.common.send
		.post('article0001', params)
		.then((res: any) => {
			if (res.result && res.result.list.length) {
				newsList.value = res.result.list;
			}
			total.value=Number(res.result.total)
		});
};
/**
 * @description 初始化显示高度
 */
const initHeight = () => {
	const height = window.innerHeight - 124;
	newsRef.value.style.height = height + 'px';
	getNewsList();
};
/**
 * @description 页码切换的回调
 * @param currentPage
 */
const handlePageSizeChange = (currentPage: string | number) => {
	console.log(currentPage);
	getNewsList(currentPage);
};
/**
 * @description 跳转至资讯详情页
 */
const gotoDetail = (articleId: string) => {
	let routeUrl = router.resolve({
		path: "/article",
		query: {articleId: articleId,}
	});
	window.open(routeUrl.href, '_blank');


};
//------------------生命周期与监听-----------------------

// 初始化
onMounted(() => {
	let meta = router.currentRoute.value.meta;
	if (meta && meta.query) {
		const query: any = meta.query;
		queryData.value=Object.assign({}, query);
	}
	initHeight();
});
</script>
<style lang="scss" scoped>
.more-news {
	max-width: 1200px;
	margin: 20px auto;
	padding: 40px;
	background-color: #fff;

	ul {
		overflow-y: hidden;

		li {
			display: flex;
			justify-content: space-between;
			line-height: 40px;
			cursor: pointer;

			&:first-child {
				margin-top: 10px;
			}

			&:nth-child(5n) {
				border-bottom: 1px dashed #ccc;
				margin-bottom: 39px;
			}

			.dot {
				width: 4px;
				height: 4px;
				border-radius: 2px;
				background-color: #516EFF;
				margin-right: 10px;
			}

			span {
				color: #404040;
				font-size: 15px;
				font-family: 'Microsoft YaHei', 'SimSun';

				&:first-child {
					display: inline-block;
					width: 1000px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}

	&-pagination {
		margin-top: 10px;
	}
}
</style>
